JS vs TS

contents

JavaScript (JS) 는 웹의 표준 클라이언트 측 스크립트 언어이자 모든 최신 웹 브라우저의 기본 언어입니다. TypeScript (TS) 는 마이크로소프트가 개발한 언어로, 자바스크립트의 슈퍼셋(Superset) 이며, 자바스크립트의 모든 기능을 포함하면서도 정적 타입 시스템과 클래스 기반 객체 지향 기능을 추가하여 대규모 애플리케이션 개발에 적합하도록 설계되었습니다.

파트 1: 자바스크립트 (JavaScript, JS) - 기반

자바스크립트는 ECMA-262 표준(ECMAScript)을 기반으로 하는 고수준, 인터프리터 방식의 언어입니다.

동적 타입 (Dynamic Typing)

JS의 가장 큰 특징입니다. 변수의 타입은 런타임(실행 시점)에 결정되며, 하나의 변수가 서로 다른 타입의 값을 가질 수 있습니다.

let myVar = 10;     // myVar는 number 타입
myVar = "hello";    // myVar는 string 타입으로 변경됨

• 장점: 코드가 유연하고 빠르게 프로토타이핑할 수 있습니다.
• 단점: 타입 검사가 실행 시점까지 지연되므로, 심각한 버그(예: 오타로 인해 정의되지 않은 속성에 접근하는 경우)가 프로덕션 환경에서 발생할 때까지 발견되지 않을 수 있습니다.

실행 환경

JS는 브라우저(V8, SpiderMonkey 등 엔진 사용)와 서버 환경(Node.js 등)에서 모두 실행됩니다. 인터프리터 방식으로 작동하지만, 성능을 위해 JIT(Just-In-Time) 컴파일을 통해 기계어로 변환되기도 합니다.

파트 2: 타입스크립트 (TypeScript, TS) - 슈퍼셋 🛡️

타입스크립트는 자바스크립트의 모든 문법을 그대로 사용하면서 정적 타입을 추가한 상위 언어입니다.

정적 타입 (Static Typing)

TS의 핵심 가치입니다. 모든 변수, 함수 매개변수, 객체 속성에 타입을 명시합니다.

let myVar: number = 10; // myVar는 number 타입으로 선언됨
myVar = "hello"; // 컴파일 시점에 오류 발생!

• 장점: 컴파일 타임(빌드 시점)에 버그를 미리 잡아내어 코드의 안정성과 예측 가능성을 높입니다.
• 단점: 코드를 작성할 때 타입 선언이 추가되어 초기 개발 속도가 약간 느릴 수 있습니다.

컴파일 과정 (Transpilation)

브라우저는 타입스크립트를 직접 이해하지 못합니다. 따라서 TS 코드는 실행되기 전에 반드시 트랜스파일(Transpile) 과정을 거쳐 일반 자바스크립트 코드로 변환되어야 합니다.

• 컴파일러: tsc(TypeScript Compiler)가 이 역할을 합니다.
• 결과물: 타입 정보는 제거되고, 순수한 ES5, ES6, 또는 원하는 버전의 자바스크립트가 출력됩니다.

파트 3: 상세 비교 - 대규모 애플리케이션의 필요성

런타임 오류의 위험

자바스크립트에서 발생하는 흔한 문제는 다음과 같습니다.

function greet(user) {
    // 개발자의 의도는 user.name을 출력하는 것이었으나, 오타가 남
    console.log(user.nmae); // user 객체가 로드될 때까지 오류를 알 수 없음
}
greet({ name: "Alice" });

타입스크립트를 사용하면, 컴파일러가 user 객체에 nmae 속성이 없음을 즉시 경고하므로, 코드가 실행되기도 전에 버그를 잡을 수 있습니다.

파트 4: 타입스크립트의 주요 고급 기능

타입스크립트는 단순한 타입 표기 이상의 고급 기능들을 제공합니다.

• 인터페이스 (Interfaces): 객체가 가져야 할 속성과 메서드의 "계약"을 정의합니다. 이는 클래스 외부에서 데이터 구조의 형태를 정의하는 데 필수적이며, 깔끔한 아키텍처를 구축하는 데 핵심입니다.
• 제네릭 (Generics): 재사용 가능하면서도 타입에 안전한 컴포넌트를 만들 수 있게 합니다. 예를 들어, Array<T>처럼 어떤 타입(T)이든 다룰 수 있는 배열을 선언할 수 있습니다.
• 데코레이터 (Decorators): 클래스나 메서드에 메타프로그래밍 구문을 추가할 수 있게 합니다. (앵귤러, 네스트JS와 같은 프레임워크에서 모듈, 컴포넌트를 정의하는 데 광범위하게 사용됩니다.)
• 타입 정의 파일 (.d.ts): 타입 정보가 없는 기존 자바스크립트 라이브러리(예: jQuery)에 대한 타입 정의를 별도로 제공하여, 해당 라이브러리를 타입스크립트 프로젝트에서 안전하게 사용할 수 있게 합니다.

파트 5: 언제 무엇을 선택해야 하는가

• 자바스크립트 (JS)를 선택할 때:
  • 매우 작고 간단한 스크립트나 프로젝트.
  • 빠른 프로토타이핑이 가장 중요하며, 타입 안전성보다 개발 속도가 우선일 때.
  • 타입 시스템에 구애받지 않는 자유로운 실험이 필요할 때.
• 타입스크립트 (TS)를 선택할 때:
  • 대규모 엔터프라이즈 애플리케이션.
  • 2명 이상의 개발자가 협업하는 모든 프로젝트.
  • 유지보수성과 장기적인 안정성이 중요한 프로젝트.
  • 리팩토링을 자주 수행해야 하며, 변경으로 인한 오류를 두려워하고 싶지 않을 때.

references